<template>
	<view>
		<view class="banner animated fadeIn">
			<u-swiper :list="swiperList" height="450" interval="5000" img-mode="scaleToFill"></u-swiper>
		</view>

		<!-- <view class="btns d-flex flex-wrap j-center">
			<block v-for="(item, i) in serverList" :key="i">
				<view class="btnbox">
					<view @tap="itemBtnTap(item.key)" class="btn_item da-center flex-column rounded-10 animated fadeInDown" :class="'delay-' + i" hover-class="bg-light-secondary">
						<image :src="item.img_url" mode=""></image>
						<text class="font line-h">{{ item.title }}</text>
					</view>
				</view>
			</block>
		</view> -->

		<view class="p-2">
			<block v-for="(item, i) in serverList" :key="i"><serverListItem :item="item" @click.native="itemBtnTap(item.key, i)" :index="i"></serverListItem></block>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { serverList } from './dataList.js';
import serverListItem from '@/components/enterprise/server_list_item.vue';

import { img_url } from '@/api/loadFile.js'
export default {
	components: {
		serverListItem
	},
	data() {
		return {
			serverList,
			swiperList: [
				{ image: img_url+'11.jpg' },
				{ image: img_url+'22.jpg' },
				{ image: img_url+'33.jpg' },
				{ image: img_url+'44.jpg' },
				{ image: img_url+'55.jpg' },
				
			]
		};
	},
	computed: {
		...mapGetters(['token'])
	},
	methods: {
		itemBtnTap(key, i) {
			if (!this.token) {
				uni.showToast({
					title: '请登录！！！',
					icon: 'none',
					success: () => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});

				return false;
			}

			uni.setStorageSync('token', this.token);
			if (key === 'gg') {
				uni.navigateTo({
					url: '/pages/property/publicServe/publicServe'
				});

				return false;
			}

			if (key === 'parking') {
				uni.showToast({
					title: '敬请期待！',
					icon: 'none'
				});

				return false;
			}

			uni.navigateTo({
				url: 'page_item/property_fix/property_fix?key=' + key
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 750rpx;
	height: 450rpx;
}

.btns {
	width: 100%;
	padding: 46rpx 0;
	.btnbox {
		width: 33.33%;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		image {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 18rpx;
		}

		.btn_item {
			padding: 20rpx 0;
		}
	}
}
</style>
